<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    title="变更学员状态"
    width="450px"
    @close="handleCancel"
  >
    <div class="handle-box">
      <flexbox class="handle-item">
        <div class="handle-item-name">变更学员状态为：</div>
        <el-select v-model="studentStatus" placeholder="请选择">
          <el-option
            v-for="item in studentStatusOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </flexbox>

      <flexbox class="handle-item" v-if="changeStudentStatusShow">
        <div class="handle-item-name">
          <span style="color: red">*</span>请上传截图
        </div>
        <div style="width: 0; flex: 1">
          <el-upload
            action="#"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            :on-change="handleimageChange"
            :http-request="selectVideo"
            multiple
            :auto-upload="false"
            accept="image/png , image/jpg, image/jpeg, image/gif"
            :limit="9"
            list-type="picture"
            ref="upload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png/gif文件，且不超过9张
            </div>
          </el-upload>
        </div>
      </flexbox>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click.native="handleCancel">取消</el-button>
      <el-button v-debounce="handleConfirm" type="primary">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { XhUserCell } from "@/components/CreateCom";
import { crmCustomerTransferAPI } from "@/api/crm/customer";
import { crmContactsTransferAPI } from "@/api/crm/contacts";
import { crmBusinessTransferAPI } from "@/api/crm/business";
import { crmContractTransferAPI } from "@/api/crm/contract";
import { crmLeadsTransferAPI } from "@/api/crm/leads";
import { crmProductTransferAPI } from "@/api/crm/product";
import {
  crmReceivablesOverdueAPI,
  crmQueryOverdueAPI,
} from "@/api/crm/receivables";
import { crmInvoiceTransferAPI } from "@/api/crm/invoice";
import {
  crmCustomerVipChangeAPI,
  crmQueryBatchIdsByIdsAPI,
  crmUpdateStudentStatusByIdsAPI,
} from "@/api/crm/vipStudents";
import { XhFiles } from "@/components/CreateCom";
import request from "@/utils/request";
import { adminFileDeleteByIdAPI } from "@/api/admin/file";
import { crmFileDeleteAPI } from "@/api/common";

export default {
  /** 学员管理 的 勾选后的 转移 操作*/
  name: "ChangeHandle",
  components: {
    XhFiles,
    XhUserCell,
  },
  mixins: [],
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
      default: false,
    },
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: "",
    },
    /** 转移数据 */
    selectionList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    idList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selectIdList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      loading: false, // 加载动画
      visible: false,

      usersList: [], // 变更负责人
      removeType: 1, // 移动类型
      handleType: 1, // 操作类型
      addsTypes: [], // 添加至
      studentStatusOptions: [
        { label: "已入学", id: 1 },
        { label: "已退学", id: 0 },
      ],
      studentStatus: "",
      changeStudentStatusShow: false,
      fileList: [],
      fileUploadList: [],
      uploadRe: 0,
      fileListedit: [],
      batchId: null,
    };
  },
  computed: {
    // 是否展示移除操作类型
    showRemoveType() {
      if (
        this.crmType == "leads" ||
        this.crmType == "contacts" ||
        this.crmType == "receivables" ||
        this.crmType == "product" ||
        this.crmType == "invoice"
      ) {
        return false;
      }
      return true;
    },
  },
  watch: {
    dialogVisible: {
      handler(val) {
        this.visible = val;
        if (!val) {
          this.resetData();
        }
      },
      deep: true,
      immediate: true,
    },
    studentStatus: {
      handler(val) {
        if (val == 4 || val == 6) {
          this.changeStudentStatusShow = true;
        } else {
          this.changeStudentStatusShow = false;
        }
      },
    },
    idList: {
      handler(val) {
        this.batchId = val[0];
        console.log(this.batchId);
        // if(val.length > 1){
        //   this.studentStatusOptions = [
        //     { label: "待入学", id: 1 },
        //     { label: "已入学", id: 2 },
        //     { label: "待停课", id: 3 },
        //     { label: "待退学", id: 5 },
        //   ];
        // }else{
        //   this.studentStatusOptions = [
        //     { label: "待入学", id: 1 },
        //     { label: "已入学", id: 2 },
        //     { label: "待停课", id: 3 },
        //     { label: "已停课", id: 4 },
        //     { label: "待退学", id: 5 },
        //     { label: "已退学", id: 6 },
        //   ];
        // }
      },
    },
  },
  mounted() {},
  methods: {
    /**
     * 重置信息
     */
    resetData() {
      this.usersList = [];
      this.removeType = 1; // 移动类型
      this.handleType = 1; // 操作类型
      this.addsTypes = []; // 添加至
    },

    /**
     * 取消选择
     */
    handleCancel() {
      this.visible = false;
      this.$emit("update:dialogVisible", false);
    },
    /**
     * 保存
     */
    handleConfirm() {
      if (this.studentStatus === "") {
        this.$message.error("请选择变更学员状态");
      } else {
        if (this.studentStatus != 4 && this.studentStatus != 6) {
          if (this.fileList.length > 0) {
            for (var i = 0; i < this.fileList.length; i++) {
              crmFileDeleteAPI({
                id: this.fileList[i].fileId,
              })
                .then((res) => {})
                .catch(() => {});
            }
          }
        } else {
          if (this.fileList.length == 0) {
            this.$message.error("请上传附件");
            return;
          }
          this.$refs.upload.submit();
        }
        this.save();
      }
    },
    save() {
      this.loading = true;
      const params = {
        studentStatus: this.studentStatus,
      };
      params.ids = this.selectIdList.toString();
      console.log(params);
      crmUpdateStudentStatusByIdsAPI(params).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.loading = false;
        this.fileList = [];
        this.studentStatus = "";
        this.$emit("handle", {
          type: "deal_status",
        });
        this.handleCancel();
      });
      //刷新列表页
    },
    getRequest() {
      if (this.crmType === "leads") {
        return crmLeadsTransferAPI;
      } else if (this.crmType === "customer") {
        return crmCustomerTransferAPI;
      } else if (this.crmType === "contacts") {
        return crmContactsTransferAPI;
      } else if (this.crmType === "business") {
        return crmBusinessTransferAPI;
      } else if (this.crmType === "contract") {
        return crmContractTransferAPI;
      } else if (this.crmType === "receivables") {
        return crmReceivablesOverdueAPI;
      } else if (this.crmType === "product") {
        return crmProductTransferAPI;
      } else if (this.crmType === "invoice") {
        return crmInvoiceTransferAPI;
      } else if (this.crmType === "vipStudents") {
        return crmCustomerVipChangeAPI;
      }
    },
    getParams() {
      var params = {
        studentStatus: this.studentStatus,
      };

      params["ids"] = this.selectionList.map((item) =>
        parseInt(item["receivablesId"])
      );
      return params;
    },

    //删除图片
    handleRemove(file, fileList) {
      this.fileList = [...fileList];
    },
    handleimageChange(file, fileList) {
      this.fileList = [...fileList];
    },
    // 上传成功时的钩子
    uploadSuccess(res, file, fileList) {},
    selectVideo(file) {
      var param = new FormData();
      Object.keys(file).forEach((key) => {
        if (key == "file") {
          param.append(key, file[key]);
        }
      });
      this.fileRe(param);
    },
    handlePreview(file) {},
    selectVideo(file, fileList) {
      console.log(Object.keys(file));
      var param = new FormData();
      Object.keys(file).forEach((key) => {
        if (key == "file") {
          param.append(key, file[key]);
        }
      });
      param.append("batchId", this.batchId);
      this.fileRe(param);
    },
    fileRe(param) {
      this.resResult = false;
      request({
        url: "adminFile/upload",
        method: "post",
        data: param,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        this.resResult = true;
        this.resNum += 1;
        this.filevalue = res.data.batchId;
        this.fName = res.data.name + "," + this.fName;
        this.uploadSuccess(res);
        this.fileList.push({
          fileId: res.data.fileId,
          url: "http://crmfile.hanpinedu.com/" + res.data.path,
        });
        this.fileListedit.push(res.data.fileId);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.handle-box {
  color: #333;
  font-size: 12px;
}
.handle-item {
  padding-bottom: 15px;
  .handle-item-name {
    flex-shrink: 0;
    width: 115px;
  }
  .handle-item-content {
    flex: 1;
  }
}
.handle-bar {
  position: relative;
  margin-top: 10px;
  height: 30px;
  button {
    float: right;
    margin-right: 10px;
  }
}
</style>
